<!DOCTYPE html>
<html>
<head>
	<title>事件的三个阶段</title>
	<style type="text/css">
		.div1 {
			width: 500px;
			height: 500px;
			background: red;
		}
		.div2 {
			width: 400px;
			height: 400px;
			background: yellow;
		}
		.div3 {
			width: 300px;
			height: 300px;
			background: blue;
		}
		.div4 {
			width: 200px;
			height: 200px;
			background: skyblue;
		}
	</style>
</head>
<body>
<div class="div1">
	<div class="div2">
		<div class="div3">
			<div class="div4"></div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">

/* 事件的三个阶段

	1. 捕获阶段，即从外到目标元素
	2. 目标阶段， 触发的元素
	3. 冒泡阶段， 从目标元素向外
*/
	

/* addEventListener

	1. 第三个参数
		true: 		捕获阶段
		false： 	冒泡阶段
*/
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
	divs[i].addEventListener('click', function() {
		console.log(this);
	}, false);
}


/* attachEvent

	只有冒泡阶段
*/


// onclick只有冒泡事件
// var divs = document.getElementsByTagName('div');
// for (var i = 0; i < divs.length; i++) {
// 	divs[i].onclick = function() {
// 		console.log(this);
// 	}
// }

</script>
</html>